<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<title>组件基础-基本示例&组件的复用</title>
</head>
<body>
	
<div id="components-demo">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>

<div id="app2">
  <mytest></mytest>
</div>



</body>
<script type="text/javascript">
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }

  },
  /*
  一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：
  
   data 并不是像这样直接提供一个对象：
  data: {
     count: 0
  } 
  */
 
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

new Vue({ el: '#components-demo' });

var MyTest={template:'<h1>Test Component</h1>'}

var app2=new Vue({
  el:'#app2',
  components:{
    'mytest':MyTest,
  },
});
</script>